<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期权赢</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__HOME__/css/common22.css">
    <link rel="stylesheet" type="text/css" href="__HOME__/css/zhangting.css">
    <script src="__HOME__/js/jquery-1.12.4.js"></script>

    <link href="__HOME__/css/style.css" rel="stylesheet">
    <style type="text/css">
        .trade-content nav section{
            flex: 1;
            color: #737373;
            margin-top:0.7rem;
            height: 14px;
            line-height: 14px;
            text-align: center;
            font-size: 1.13rem;
            -moz-font-size:1.13rem;
            -webkit-font-size: 1.2rem;
        }
        .trade-content nav {
            height: 2.4rem;
            background: #252529;
            display: flex;
            width: 100%;
            padding: 1 2%;
            box-sizing: border-box;
        }

        .trade-content nav article {
            padding: 0 0.02rem;
            flex: 2;
            height: 1.3rem;
            display: flex;
            border-radius: 1.1rem;
            background: #17171a;
            color: white;
            margin-top: 0.3rem;
            padding: 0.2rem 0;

        }
        .trade-content nav article span.active {
            color: #fdbe19;
            background: #323237;
            border-radius: 1.1rem;
            box-shadow: 0 0 2px #3e3c42;
        }
        .trade-content nav article span {
            display: inline-block;
            height: 16px;
            margin-top: 0.1rem;
            flex: 1;
            text-align: center;
            font-weight: 700;
            line-height: 1.26rem;
        }

        element.style {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 513px;
            height: 270px;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            padding: 0px;
            margin: 0px;
            border-width: 0px;
        }
        .tankuang,.fg{
            position: absolute;
            top: 0;
            left: 23%;
            width: 60%;
            height: 90%;
            background: url("__HOME__/img/chenggong.png") no-repeat center;
            background-size: 100% 100%;
            z-index: 9999;
            display:none;
        }

        .tankuang,.df{
            position: absolute;
            top: 0;
            left: 23%;
            width: 60%;
            height: 90%;
            background: url("__HOME__/img/shibai.png") no-repeat center;
            background-size: 100% 100%;
            z-index: 9999;
            display:none;
        }


        .tankuang input{
            width: 20%;
            height: auto;
            line-height: 1.8rem;
            font-size: 1.8rem;
            background: transparent;
            text-align: center;
            position: absolute;
            top: 46%;
            left: 40%;
            outline: none;
            border: none;
            z-index: 9999999;
        }
        .tankuang .close{
            width: 1.2rem;
            height: 1.2rem;
            position: absolute;
            top: 65%;
            left: 49%;
            border: 0px solid #666666;
            border-radius: 50%;
        }
		
		
		
		
table {  
*border-collapse: collapse; /* IE7 and lower */  
border-spacing: 0;  
width: 100%;  
}  
.bordered {  
border: solid #ccc 1px;  
-moz-border-radius: 6px;  
-webkit-border-radius: 6px;  
border-radius: 6px;  
-webkit-box-shadow: 0 1px 1px #ccc;  
-moz-box-shadow: 0 1px 1px #ccc;  
box-shadow: 0 1px 1px #ccc;  
}  
  
.bordered tr:hover {  
background: #fbf8e9;  
-o-transition: all 0.1s ease-in-out;  
-webkit-transition: all 0.1s ease-in-out;  
-moz-transition: all 0.1s ease-in-out;  
-ms-transition: all 0.1s ease-in-out;  
transition: all 0.1s ease-in-out;  
}  
  
.bordered td, .bordered th {  
border-left: 1px solid #ccc;  
border-top: 1px solid #ccc;  
padding:3px;/*供修改*/
text-align: center;/*供修改*/  
}  
  
.bordered th {  
background-color: #dce9f9;  
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));  
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: linear-gradient(top, #ebf3fc, #dce9f9);  
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
border-top: none;  
text-shadow: 0 1px 0 rgba(255,255,255,.5);  
}  
  
.bordered td:first-child, .bordered th:first-child {  
border-left: none;  
}  
  
.bordered th:first-child {  
-moz-border-radius: 6px 0 0 0;  
-webkit-border-radius: 6px 0 0 0;  
border-radius: 6px 0 0 0;  
}  
  
.bordered th:last-child {  
-moz-border-radius: 0 6px 0 0;  
-webkit-border-radius: 0 6px 0 0;  
border-radius: 0 6px 0 0;  
}  
  
.bordered th:only-child{  
-moz-border-radius: 6px 6px 0 0;  
-webkit-border-radius: 6px 6px 0 0;  
border-radius: 6px 6px 0 0;  
}  
  
.bordered tr:last-child td:first-child {  
-moz-border-radius: 0 0 0 6px;  
-webkit-border-radius: 0 0 0 6px;  
border-radius: 0 0 0 6px;  
}  
  
.bordered tr:last-child td:last-child {  
-moz-border-radius: 0 0 6px 0;  
-webkit-border-radius: 0 0 6px 0;  
border-radius: 0 0 6px 0;  
} 
		
		
		

    </style>
    <script>
        // var order_type = 0;  // 0涨 1跌       1
        var order_pid = {$pro.pid};  //期货的商品的pid   1
        // var order_price = {$pay_choose_arr[0]};  //投资金额      1

        // var order_sen = {$protime[0]*60};  //结算时间    1
        var order_shouyi = {$proscale[0]};   //订单收益金额  1
        var newprice = {$pro.Price};  //实时价格  1
        var rawData_data = [];
        var my_money = {$userinfo.usermoney?$userinfo.usermoney:'0'};//账户余额
        var order_min_price = {:getconf('order_min_price')};
        var order_max_price = {:getconf('order_max_price')};
    </script>
</head>
<body  ng-app="starter" ng-controller="AppCtrl" class="grade-a platform-browser platform-ios platform-ios9 platform-ios9_1 platform-ready">
<div class="ground">
    <div class="middle">
        <div class="ground-left">
            <a name="1" class="xz" href="###"><p>1</p>分钟</a>
            <a name="3" class="a2" href="###"><p>3</p>分钟</a>
            <a name="5" href="###"><p>5</p>分钟</a>
        </div>
        <div class="ground-tu">
            <!--  <ul class="ground-ul">
                <li class="li1" onclick="javascript:window.location.href='http://localhost/index/goods/goods/pid/12.html?name=12'"><span>美原油</span></li>

                <li class="li2" onclick="javascript:window.location.href='http://localhost/index/goods/goods/pid/9.html?name=9'"><span>比特币</span></li>
                <li class="li3" onclick="javascript:window.location.href='http://localhost/index/goods/goods/pid/8.html?name=8'"><span>莱特币</span></li>
                <li class="li4" onclick="javascript:window.location.href='http://localhost/index/goods/goods/pid/7.html?name=7'"><span>以太坊</span></li>
            </ul>  -->
            <!-- <ul class="ground-ul">
                <li class="li1" onclick="javascript:window.location.href='/index/goods/goods/pid/12.html?name=12'"><span>美原油</span></li>

                <li class="li2" onclick="javascript:window.location.href='/index/goods/goods/pid/13.html?name=13'"><span>美黄金</span></li>
                <li class="li3" onclick="javascript:window.location.href='/index/goods/goods/pid/14.html?name=14'"><span>美白银</span></li>

            </ul> -->

            <div class="ground-neirong">
                <div class="neirong-div" style="display: block;">

                    <!--开始-->
                    <ion-nav-view class="view-container" nav-view-transition="ios" nav-view-direction="exit" nav-swipe="">
                        <ion-view view-title="{$pro.ptitle}" class="trade-view pane" hide-nav-bar="false" state="trade" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
                            <ion-content class="trade-content content-background scroll-content ionic-scroll  has-header" scroll="true"><div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);">
                                <nav>
                                    <article >
                                        <span class="trade-chart-type line active" onclick="change_chart_type('line')">走势</span>
                                        <span class="trade-chart-type stock " onclick="change_chart_type('stock')" >k线</span>

                                    </article>
                                    <section class="trade-chart-period 1M active" onclick="change_chart_period('1M')">1M</section>
                                    <section class="trade-chart-period 5M" onclick="change_chart_period('5M')">5M</section>
                                    <section class="trade-chart-period 15M" onclick="change_chart_period('15M')">15M</section>
                                    <section class="trade-chart-period 30M" onclick="change_chart_period('30M')">30M</section>
                                    <section class="trade-chart-period 1H" onclick="change_chart_period('1H')">1H</section>
                                    <section class="trade-chart-period 1D" onclick="change_chart_period('1D')">1D</section>
                                </nav>

                                <footer>
                                    <div id="container">
                                        <div id="ecKx"></div>
                                        <div class="txt1"><span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span><span class="e"></span></div>
                                        <!--  <div class="txt2"><span class="a">DIFF:<i></i></span><span class="b">DEA:<i></i></span><span class="c">MACD:<i></i></span></div> -->

                                    </div>
                                </footer>
                            </div><div class="scroll-bar scroll-bar-v">
                                <div class="scroll-bar-indicator scroll-bar-fade-out" style="transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div>
                            </div>
                            </ion-content>
                        </ion-view>
                    </ion-nav-view>
                    <!--结束-->
                </div>

            </div>
            <!--选择投资金额-->
            <ul class="ground-ul1">
                <li class="lv" style="background-image: url(__HOME__/img/image/foot1.png)">1</li>
                <li style="background-image: url(__HOME__/img/image/foot2.png)">10</li>
                <li style="background-image: url(__HOME__/img/image/foot3.png)">20</li>
                <li style="background-image: url(__HOME__/img/image/foot4.png)">50</li>
                <li style="background-image: url(__HOME__/img/image/foot5.png)">100</li>
                <li style="background-image: url(__HOME__/img/image/foot6.png)">300</li>
            </ul>
        </div>
        <div class="ground-right">
            <a name="60" class="bei" href="###" beinum="1.6">1.6 倍</a>
            <a name="200" class="a2" href="###" beinum="3">3 倍</a>
            <a name="500" href="###" beinum="6">6 倍</a>
        </div>
    </div>
    <div class="ground-foot">
        <div class="ground-foot-left"  onclick="kaishi(dtar=0)" ><img src="__HOME__/img/image/zhang.png" alt=""></div>
        <div class="ground-foot-middle ground-timer">
            <img src="__HOME__/img/image/dibu1.jpg" alt="">
        </div>
        <div class="ground-foot-middle time">
            <img src="__HOME__/img/image/dibu3.gif" alt="">
            <span  class="dao"></span>
        </div>
        <div class="ground-foot-right" onclick="kaishi(dtar=1)"><img src="__HOME__/img/image/die.png" alt=""></div>
    </div>
    
</div>
<div>
        <table class="bordered" >
            <caption>{$username}，投注信息(TOP5)</caption>
			<thead>
            <tr>
               <!-- <th>账户名</th>-->
               <th>时间</th>
                <th>方向</th>
                <th>豆数量</th>
                <th>买入点位 </th>
                <th>行权点位</th>
                <th>盈亏</th>
                <th>持盈盾</th>
            </tr>
			</thead>
            <tbody id="touzhu_info">


            </tbody>
         </table>
    </div>
<!--盈利-->
<div class="tankuang fg">
    <input type="text" value="">
    <div class="close"></div>
    <span><img src="__HOME__/img/luoye.gif" alt=""></span>
</div>
<!--赔钱-->
<div class="tankuang df">
    <input type="text" value="">
    <div class="close"></div>
    <span><img src="__HOME__/img/luoye.gif" alt=""></span>
    <!--<span><img src="__HOME__/img/bai.jpg" alt=""></span>-->
</div>
</body>
<script>
    // 0未投注，1已投注没有结束
    var op_touzhu =0;
</script>
<script src="__HOME__/js/lk/chardata.js"></script>
<script src="__HOME__/js/echarts.js"></script>
<script src="__HOME__/js/kxian.js"></script>

<script>
    setInterval('getdata({$pro.pid})', 1500);
</script>

<script>
    setInterval('getdata_touzhu()', 1500);
</script>

<script>
function getdata_touzhu() {
var url = "/index/order/ajaxtouzhu_info/";
$.get(url,function(data){
    $('#touzhu_info').html(data.info);
});
}
</script>
<script>

    // 判断屏幕是否旋转

    // function orientationChange() {

    //     switch(window.orientation) {

    //     　　case 0:

    //             alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             window.location.reload();
    //             break;

    //     　　case -90:

    //             // alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             window.location.reload();
    //             break;

    //     　　case 90:

    //             // alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             window.location.reload();
    //             break;

    //     　　case 180:

    //         // 　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             window.location.reload();
    //         　　break;
    //     }

    //     };

    // // 添加事件监听

    // addEventListener('load', function(){

    //     orientationChange();

    //     window.onorientationchange = orientationChange;

    // });







    $(function(){
        $(".close").click(function(){
            $(".tankuang").hide();
            window.location.reload();
        })
    })
    //-------------获取金额
    $(function(){
        $(".ground-ul1>li").click(function(){
            var hug = $(this).html();

            if(my_money < hug)
            {
                alert('余额不足请去充值!');
                window.open("/index/user/index.html");
                window.location.href = "/index/user/index.html";
            }
        })
    })

    //  $(function(){
    //     var a=$(".ground-ul1>li.lv").html();

    //     alert(a);

    // })

    //------获取其他金额
    // $(function(){
    // var h=$(".ground-ul1>li>input").val()

    // function chufa(){
    //     $(".ground-ul1>li>input").onkeyup(function(){
    //         var hu=$(this).val();
    //         alert(hu);
    //     })

    // }
    // })

    //-------------
    $(function(){
        var n=0;
        $(".ground-ul>li").click(function(){
            $(this).addClass("now").siblings().removeClass("now");
            // $('.ground-neirong>div').eq($(this).index()).show().siblings('.ground-neirong>div').hide();
            n=$(this).index();
        })
    })

    $(".ground-right>a").click(function(){
        $(this).siblings().removeClass('bei');
        $(this).addClass('bei');
    })
    $(".ground-ul1>li").click(function(){
        $(this).siblings().removeClass('lv');
        $(this).addClass('lv');
    })

    $(".ground-left>a").click(function(){
        $(this).siblings().removeClass('xz');
        $(this).addClass('xz');
    })
    var countdown=60;
    var stop=false;



    function kaishi(dtar){
        var a=$(".ground-ul1>li.lv").html(); //获取投资金额
        var he=$(".ground-ul1>li>input").val();//获取其他投资金额
        var goods_price=0;
        if(!isNaN(a))
        {
            var order_price = a;  //投资金额      1
        }else{
            var order_price = he;  //投资金额      1
        }
        goods_price =order_price;
        var b=$(".xz").attr("name");         //获取结算时间
        var shouyi=$(".bei").attr("name");    //获取收益金额

        var beishu =$(".bei ").attr("beinum");
        if(beishu>0){
            //order_price =order_price*beishu;
            order_price =order_price;
        }


        var order_type = dtar;  // 0涨 1跌    1

        var order_sen = b*countdown;  //结算时间    1

        // var order_shouyi = {$proscale[0]};   //订单收益金额  1

        var n=$(".xz").attr("name");
        countdown=countdown*n;
        // endtimes();
        //alert("是否开始计时！")
        var r=confirm("确认下单？")
        if(op_touzhu ==1){
            alert("是否开始计时！");
            return false;
        }

        if (r==true){
            //endtimes();
            //     setInterval(function() {
            //         endtimes();
            //     },1000)

            // var m=$(".dao").text();
            // if(m==1){
            //     $(".time").css("display","none");
            //     $(".ground-timer").css("display","block");
            //     setInterval(function() {
            //         endtimes();
            //     },1000)
            // }

            var info =addorder(order_price,order_type,order_sen,shouyi,beishu,goods_price);  //执行下单函数
            if(info ==-1){
                window.open("/index/user/index.html?showpay=1");

            }
            // 表示已投注
            op_touzhu =1;

        }else {

            clearInterval(countdown);
            countdown=undefined;
            //clearInterval(settime);
            var m=$(".dao").text();
            if(m == 60){
                $(".time").hide()
                $(".ground-timer").show()
            }
            if(m == 180){
                $(".time").hide()
                $(".ground-timer").show()
            }
            if(m== 300 ){
                $(".time").hide()
                $(".ground-timer").show()
            }
        }
    }

    // function timerw(){
    //     clearInterval(endtimes);
    //     var m=$(".dao").text();
    //     if(m==1){
    //         $(".time").css("display","none")
    //         $(".ground-timer").show()
    //     }
    // }

    //     function endtimes() {
    //         if (countdown <= 0 && !stop) {
    //             timerw()
    //         } else {
    //             $(".ground-timer").hide();
    //             $(".time").show();
    //             $(".dao").html(countdown);
    //             countdown--;
    //         }
    //     }

    $(function(){
        //获取页面url传过来的参数
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for(var i = 0; i < strs.length; i ++) {
                    theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

        var Request = new Object();
        Request = GetRequest();
        var num = Request['name'];
        if(num==12||num==undefined){
            $(".ground-ul>li:eq(0)").addClass("now").siblings().removeClass("now");
        }
        if(num==9){
            $(".ground-ul>li:eq(1)").addClass("now").siblings().removeClass("now");
        }
        if(num==8){
            $(".ground-ul>li:eq(2)").addClass("now").siblings().removeClass("now");
        }
        if(num==7){
            $(".ground-ul>li:eq(3)").addClass("now").siblings().removeClass("now");
        }
        if(num==13){
            $(".ground-ul>li:eq(1)").addClass("now").siblings().removeClass("now");
        }
        if(num==14){
            $(".ground-ul>li:eq(2)").addClass("now").siblings().removeClass("now");
        }



    })

    window.addEventListener("resize", function() {
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度) 
        document.location.reload();//当前页面
    }, false);
</script>
</html>